<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue computed</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app-9">
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        <div>{{fullName}}</div>
        <div>{{count}}</div>


        <div>
            <input type="checkbox" v-model="fn">全选

            <input type="checkbox" v-for="item in products" v-model="item.isChecked">
        </div>
    </div>
</body>
<script>
    var app9 = new Vue({
        el: "#app-9",
        data:{
            firstName: '',
            lastName: '',
            count:0,
            products:[{isChecked: true},{isChecked: false}]
        },
        // 计算属性
        computed: {
            fullName: function(){
                return this.firstName + ' ' + this.lastName;
            },
            fn: {
                set(val){
                    this.products.forEach(item => {
                        item.isChecked = val
                    });
                },
                get(){
                    return this.products.every(item => item.isChecked)
                }
            }
        },
        // 监听属性变化
        watch: {
            // firstName: function(){
            //     this.count++
            // },
            // lastName: function(){
            //     this.count++
            // },
            fullName: function(){
                this.count++
            }
        }
    })
</script>

</html>